<template>
	<div class="list_c">
		<list reqUrl="/api/banklist" ref="listInstance" :immediatecheck="false" emptyText="暂无银行卡" :empty-img="bankEmpty"
			formatData :handleFormat="handleFormat">
			<template v-slot=" { list }">
				<template v-for="(item, index) in list" :key="item.bank_id">
					<view @click="back(item)" class="bank" :class="{ default: item.is_default === 1 }">
						<view>{{ item.bank }}（ {{item.open_bank}}{{item.bank_number}} ）</view>
						<view class="number">{{ item.bank_no }}</view>
						<view class="bottom_bar">
							<view class="is_default" @click.stop="setDefault(item,index)">
								<uni-icons v-if="item.is_default === 1" type="checkbox-filled" size="20" color="#fff">
								</uni-icons>
								<uni-icons v-else type="circle" size="20" color="#fff"></uni-icons>
								<text class="text">默认</text>
							</view>
							<view class="operation" @click.stop="update(item)">
								<img src="/static/image/bank-update.png" class="icon" />
								<text>修改</text>
							</view>
							<view class="operation" @click.stop="del(item,index)">
								<image src="/static/image/bank-del.png" class="icon" />
								<text>删除</text>
							</view>
						</view>
					</view>
				</template>

			</template>
		</list>
	</div>
	<fixed-button @touch="goAddBank">添加银行卡</fixed-button>
</template>

<script setup>
	import { nextTick, ref } from 'vue';
	import { onPullDownRefresh, onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
	import bankEmpty from '/static/image/bank-empty.png';
	import { sleep } from '@/utils/common/index';
	import request from '@/utils/common/request/index';
	import { useCacheStore } from '@/store/modules/useCacheStore';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor } = useGetThemColor();
	// * 是否为上页选择银行卡
	let isChoose = false;
	let showChooseTip = false;
	onLoad((option) => {
		if (option.choose) {
			isChoose = true;
			showChooseTip = true;
		}
	})

	onShow(() => {
		nextTick(async () => {
			// #ifdef H5
			await sleep(10);
			// #endif
			listInstance.value.resetRequest();
		})
	})

	const listInstance = ref(null);
	/**数据格式化函数 */
	const handleFormat = (res) => {
		if (showChooseTip && res.data.length > 0) {
			uni.showToast({
				title: '请点击你要选择的银行卡',
				icon: 'none'
			});
			showChooseTip = false;
		}
		return res.data;
	};

	// * 设置默认银行卡
	const setDefault = (bank, index) => {
		if (bank.is_default === 1) return uni.showToast({
			title: '已是默认银行卡',
			icon: 'none',
		});
		uni.showModal({
			title: '提示',
			content: '您确实设置该银行卡为默认银行卡吗？',
			confirmColor: primaryColor.value,
			success(res) {
				if (res.cancel) return;
				request({
					url: '/api/setdefaultbank',
					method: 'POST',
					data: {
						bank_id: bank.bank_id
					}
				}).then(() => {
					uni.showToast({
						title: '设置成功',
						icon: 'success',
					});
					let list = listInstance.value.captureList();
					const defaultIndex = list.findIndex(item => {
						return item.is_default === 1;
					})

					if (defaultIndex !== -1) list[defaultIndex].is_default = 2;
					list[index].is_default = 1;
				})
			}
		});
	};
	// * 删除银行卡
	const del = (bank, index) => {
		uni.showModal({
			title: '提示',
			content: '您确实删除该银行卡吗？',
			confirmColor: primaryColor.value,
			success(res) {
				if (res.cancel) return;
				request({
					url: '/api/delbank',
					method: 'POST',
					data: {
						bank_id: bank.bank_id
					}
				}).then(() => {
					let list = listInstance.value.captureList();
					list.splice(index, 1);
					uni.showToast({
						title: '删除成功',
						icon: 'success',
					});
				})
			}
		});
	};
	// * 修改银行卡
	const update = (bank) => {
		const bank_id = bank.bank_id
		uni.navigateTo({
			url: "/pages/bank-addoredit/bank-addoredit?id=" + bank_id
		})
	};
	// * 添加银行卡
	const goAddBank = () => {
		uni.navigateTo({
			url: "/pages/bank-addoredit/bank-addoredit"
		})
	};

	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		Promise.all([listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});

	// * 选择银行卡
	const back = (bank) => {
		if (!isChoose) return;
		const cacheStore = useCacheStore();
		cacheStore.setStorageData({
			data: bank,
			field: 'bankStorage',
		})
		uni.navigateBack();
	};
</script>


<style scoped lang="scss">
	.list_c {
		padding: 14px 14px 0;
	}

	.bank {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 10px;
		padding: 21px 15px 14px;
		border-radius: 5px;
		height: 160px;
		background-color: v-bind(primaryColor);
		color: #fff;

		.number {
			text-align: center;
			font-size: 24px;
			font-weight: bold;
			letter-spacing: 2px;
		}

		.bottom_bar {
			display: flex;

			.is_default {
				flex: 1;
				display: flex;
				align-items: center;

				.text {
					margin-left: 5px;
				}
			}

			.operation {
				display: flex;
				align-items: center;
				margin-left: 20px;

				.icon {
					margin-right: 3px;
					width: 14px;
					height: 14px;
				}

				&:first-child {
					.icon {
						width: 12px;
						height: 12px;
					}
				}
			}
		}
	}
</style>


<style>
	page {
		background-color: #f5f5f5;
	}
</style>